<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="单号" name="paymentNo" />
        <f-search-form-item label="收款人" name="linkMan" />
        <f-search-form-item label="支付日期" type="range" :rangeConfig='rangeConfig'  name="payDate1" />
        <f-search-form-item label="部门" ref="dept" name="deptId" type="select" :data="api.dept.list"  valueKey="deptId" label-key="deptName" slot='advanced'/>
        <f-search-form-item label="购货方" name="customId" type="select" :data="api.custom.list" valueKey="customId" label-key="customName" slot='advanced'/>
        <f-search-form-item label="供货方" name="supplierId" type="select" :data="api.supplier.list" valueKey="supplierId" label-key="supplierName" slot='advanced'/>
      </f-search-form>
      <a-tabs @tabClick="tabClick" :defaultActiveKey="current" v-model="current" :animated='false'>
        <a-tab-pane tab="我的待办" key="form1">
          <todo-no ref="form1" v-if="current=='form1'"></todo-no>
        </a-tab-pane>
        <a-tab-pane tab="审批中" key="form2">
          <todo-yes ref="form2" v-if="current=='form2'"></todo-yes>
        </a-tab-pane>
        <a-tab-pane tab="已支付" key="form3">
          <todo-end ref="form3" v-if="current=='form3'"></todo-end>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script>

  import api from './../js/api'
  import TodoNo from './tab1'
  import TodoYes from './tab2'
  import TodoEnd from './tab3'

  export default {
    name: 'Tabs',
    components: { TodoNo, TodoYes, TodoEnd },
    data() {
      let me = this
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        rangeConfig:{
          beginName: "payDate1",
          endName: "payDate2"
        },
        current: 'form1',
        forms: [
          'form1',
          'form2'
        ]
      }
    },
    created() {
    },
    methods: {
      tabClick(name) {
        this.current = name
        this.$nextTick(() => {
          this.searchHandler()
        })
      },
      searchHandler(searchParams) {
        this.$refs[this.current].searchHandler(searchParams)
      }
    }
  }
</script>
